<template>
    <div class="app-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>登录表单</span>
          </div>
        </template>
        <el-form :inline="true" :model="user" class="demo-form-inline" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="账号">
                <el-input v-model="user.userName" placeholder="请输入用户名" clearable prefix-icon="el-icon-user" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="密码">
                <el-input v-model="user.password" placeholder="请输入密码" clearable show-password prefix-icon="el-icon-lock" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="验证码">
                <el-input v-model="user.code" placeholder="请输入验证码" clearable prefix-icon="el-icon-key" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSubmitPinia" icon="el-icon-check">Pinia执行登录</el-button>
            <el-button type="info" @click="onLoginOutPinia" icon="el-icon-close">Pinia执行登出</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="box-card login-status-card">
        <template #header>
          <div class="card-header">
            <span>登录状态</span>
          </div>
        </template>
        <p>登录状态: {{ useUserStore().isLogin ? '已登录' : '未登录' }}</p>
        <p>登录信息: {{ useUserStore().user}}</p>
      </el-card>
  
      <div class="nav-links">
        <RouterLink to="/">
          <el-button type="text">首页</el-button>
        </RouterLink>
        <RouterLink to="/about">
          <el-button type="text">关于我们</el-button>
        </RouterLink>
      </div>
  
      <main>
        <RouterView />
      </main>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useUserStore } from '@/store/loginLocalStore';
  import { reactive } from 'vue';
  
  // 参数定义
  const user = reactive({
    userName: '',
    password: '',
    code: '',
  });
  
  // 使用 Pinia 执行登录
  const onSubmitPinia = async () => {
    const userStore = useUserStore();
    let result = await userStore.userLogin(user.userName, user.password);
    console.log(result);
  };
  
  // 登出操作
  const onLoginOutPinia = async () => {
    const userStore = useUserStore();
    await userStore.userLoginOut();
  };
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
  }
  
  .box-card {
    margin-bottom: 20px;
  }
  
  .login-status-card p {
    margin: 5px 0;
  }
  
  .card-header {
    font-size: 16px;
    font-weight: bold;
  }
  
  .nav-links {
    margin-bottom: 20px;
  }
  
  .nav-links a {
    margin-right: 10px;
    text-decoration: none;
    color: #409EFF;
    transition: color 0.3s;
  }
  
  .nav-links a:hover {
    color: #66b1ff;
  }
  </style>